<template>
  <div>
    <div >
      <el-button style="float:right" @click="returnPre">返回</el-button>
    </div>
<br/>
        <table border="0" cellspacing="0" cellpadding="0" class="look-table" style="font-size:17px;border-top: solid 1px #F0F0F0;margin-top: 5px;">
          <tr v-for="tr in param.trs">
              <td :colspan="td.colspan" v-for="td in tr.tds">
                <span v-if="td.type=='name'">
                  {{td.prop}}：
                </span>
                <span v-if="td.type=='default'">
                   {{currentRow[td.prop]}}
                </span>
                <div v-if="td.type=='select'">
                  <div v-for="option in td.options"  >
                    <span v-if="currentRow[td.prop] == option.id">{{option.label}}</span>
                  </div>
                </div>
                <div v-if="td.type=='selectsearch'">
                  <div v-for="option in td.options"  >
                    <span v-if="currentRow[td.prop] == option[td.valueName]">{{ option[td.labelName]}}</span>
                  </div>
                </div>
                <div v-if="td.type=='image'">
                  <img class="logo-class" v-if="currentRow[td.prop] != null"  :src="currentRow[td.prop]" @click="screenClick(currentRow[td.prop])"/>

                </div>
              </td>
          </tr>
        </table>
    <div class="mask opacity" v-if="isShowImg" @click="closeImg">
      <img :src="rowsrc" class="img-class"/>
    </div>
  </div>
</template>
<style scoped>
  @-webkit-keyframes fadeIn {
    0% {
      background-color: rgba(0,0,0,0.1); /*初始状态 透明度为0*/
    }
    25% {
      background-color: rgba(0,0,0,0.35); /*初始状态 透明度为0*/
    }
    50% {
      background-color: rgba(0,0,0,0.4); /*中间状态 透明度为0*/
    }
    75% {
      background-color: rgba(0,0,0,0.55);; /*初始状态 透明度为0*/
    }
    100% {
      background-color: rgba(0,0,0,0.7); /*结尾状态 透明度为1*/
    }
  }
  @-webkit-keyframes fadeInImg {
    0% {
     opacity: 0 /*初始状态 透明度为0*/
    }
    25% {
      opacity: 0.25 /*初始状态 透明度为0*/
    }
    50% {
      opacity: 0.5 ; /*中间状态 透明度为0*/
    }
    75% {
      opacity: 0.75  /*初始状态 透明度为0*/
    }
    100% {
      opacity: 1 /*结尾状态 透明度为1*/
    }
  }
  .opacity{ -webkit-animation-name: fadeIn; /*动画名称*/
    -webkit-animation-duration: 0.5s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    animation-timing-function:linear;
    -webkit-animation-delay: 0s; /*延迟时间*/
    background: #000000;
    /*filter: Alpha(Opacity=10, Style=0);*/
    background-color: rgba(0,0,0,0.7);
  }
  .mask{
    height:100%;
    width:100%;
    float: left;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 100;
    text-align: center;
  }
  .img-class {
    z-index:110;
    -webkit-animation-name: fadeInImg; /*动画名称*/
    -webkit-animation-duration: 0.5s; /*动画持续时间*/
    -webkit-animation-iteration-count: 1; /*动画次数*/
    animation-timing-function:linear;
    -webkit-animation-delay: 0s; /*延迟时间*/
    opacity: 1.0;
    border: solid 3px #ffffff;
    margin-top: 30px
  }
  .logo-class {
    width:100px;
    height:100px;
    border-radius: 10px;
    margin-top:5px
  }
  .logo-class:hover{
    cursor: pointer
  }
  .screen-class{
    width:300px;
    height:200px;
    margin-top:5px;
    -moz-box-shadow:5px 5px 5px #999 inset;               /* For Firefox3.6+ */
    -webkit-box-shadow:5px 5px 5px #999 inset;            /* For Chrome5+, Safari5+ */
    box-shadow:5px 5px 5px #999 inset;                    /* For Latest Opera */
  }
  .screen-class:hover{
    cursor: pointer
  }
  .look-table{
    border-collapse:collapse;
    width:100%;
  }
  .look-table > tr{
    border-bottom:1px solid #f0f0f0;
    height:50px;
  }
  .look-table > tr:nth-child(2n-1){
    border-bottom: 1px solid #f0f0f0;
    height: 50px;
    background: #FDFDFD
  }
  .look-table > tr > td:nth-child(2n-1){
    text-align: right;
    width: 10%;
    font-weight: bold;
  }
  .look-table > tr > td:nth-child(2n){
    padding-left: 20px;
  }

</style>
<script>
  import {yfuPost} from '@/utils/request.js'
  export default {
    props: ['param'],
    data () {
      return {
        rowsrc: '',
        isShowImg: false,
        currentRow: {}
      }
    },
    created () {
      for (let tr of this.param.trs) {
        for (let param of tr.tds) {
          if (param.type === 'selectsearch') {
            let uparam = {}
            yfuPost(process.env.BASE_API, param.url, uparam, function (data) {
              if (Array.isArray(data)) {
                param.options = data
              } else {
                param.options = data.datas
              }
            })
          }
        }
      }
      this.openDialog()
    },
    methods: {
      openDialog () {
        let cThis = this
        yfuPost(process.env.BASE_API, this.param.url, {id: this.param.id}, function (data) {
          cThis.currentRow = data
          console.log(data)
        })
      },
      returnPre () {
        this.$emit('returnPreNoRefresh')
      },
      screenClick (url) {
        this.rowsrc = url
        this.isShowImg = true
      },
      closeImg () {
        this.isShowImg = false
      }
    }
  }
</script>
